<template>
  <div class="base-info">
    <div class="base-info-title">
      <div class="title-line"></div>
      基本信息
    </div>

    <div class="base-info-option">
      <div class="option-item">
        <div class="option-item-name">
          <!-- <span v-if="markStatus" class="asterisk">*</span> -->
          母亲姓名
        </div>
        <el-input
          @keyup.enter.native="
            markStatus ? infoSaveCheckResult() : infoGetPatientList()
          "
          :class="tipsInfo[0] == '姓名' ? 'tipsInfoStyle' : ''"
          placeholder="请输入内容"
          v-model.trim="customer.realName"
          maxlength="20"
          clearable
        >
        </el-input>
      </div>
      <div class="option-item" style="width: 180px">
        <div class="option-item-name">
          <span v-if="markStatus" class="asterisk">*</span>
          实验室编号
        </div>
        <el-input
          @keyup.enter.native="
            markStatus ? infoSaveCheckResult() : infoGetPatientList()
          "
          placeholder="请输入内容"
          v-model.trim="customer.code"
          maxlength="18"
          clearable
        >
        </el-input>
      </div>
      <div class="option-item">
        <div class="option-item-name">
          <!-- <span v-if="markStatus" class="asterisk">*</span> -->
          性别
        </div>
        <el-select
          :class="tipsInfo[1] == '性别' ? 'tipsInfoStyle' : ''"
          v-model="customer.sex"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="option-item">
        <div class="option-item-name">
          <!-- <span v-if="markStatus" class="asterisk">*</span> -->
          年龄
        </div>
        <el-input
          @keyup.enter.native="
            markStatus ? infoSaveCheckResult() : infoGetPatientList()
          "
          class="select-age"
          placeholder="请输入年龄"
          v-model.trim="customer.age"
          maxlength="10"
          clearable
        >
        </el-input>
      </div>
      <div class="option-item">
        <div class="option-item-name">家族遗传史</div>
        <el-input
          @keyup.enter.native="
            markStatus ? infoSaveCheckResult() : infoGetPatientList()
          "
          placeholder="请输入内容"
          v-model.trim="customer.familyHistory"
          maxlength="20"
          clearable
        >
        </el-input>
      </div>
      <div class="option-item">
        <div class="option-item-name">地区</div>
        <el-input
          @keyup.enter.native="
            markStatus ? infoSaveCheckResult() : infoGetPatientList()
          "
          placeholder="请输入地区"
          v-model.trim="customer.address"
          maxlength="20"
          clearable
        >
        </el-input>
        <!-- <el-cascader class="info-area" v-model.trim="customer.address" :options="areaOptions" :props="{ expandTrigger: 'hover',checkStrictly: true }" @change="handleChange"></el-cascader> -->
      </div>
      <div class="option-item">
        <div class="option-item-name">筛选时间</div>
        <el-date-picker
          v-model="customer.checkTime"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import cascader from "@/assets/js/cascader";
export default {
  props: {
    customer: Object,
    markStatus: Boolean,
    tipsInfo: {
      type: Array,
      default: () => ["", ""],
    },
    getPatientList: {
      type: Function,
    },
    saveCheckResult: {
      type: Function,
    },
    codeMaxLength: {
      type: Function,
      default: () => {},
    },
  },
  created() {
    // console.log('看看级联数据', cascader);
    this.areaOptions = cascader;
  },
  data() {
    return {
      options: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      areaOptions: [], //级联数据
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  watch: {
    "customer.code"(newCustomer) {
      if (newCustomer.length > 16 && this.markStatus) {
        console.log("编号", newCustomer);
        this.$message.warning("编号不能超过16位");
        this.$emit("codeMaxLength");
      }
    },
  },

  methods: {
    handleChange(value) {
      console.log(value);
    },

    /**
     *获取患者列表
     */
    infoGetPatientList() {
      this.$emit("getPatientList");
    },

    /**
     *手动存档
     */
    infoSaveCheckResult() {
      this.$emit("saveCheckResult");
    },
  },
};
</script>

<style lang="scss"></style>
<style lang="scss" scoped>
.asterisk {
  color: red;
}

.base-info {
  box-sizing: border-box;
  padding: 25px 30px;
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid #eee;

  .base-info-title {
    font-size: 16px;
    color: #3c3978;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: fit-content;

    .title-line {
      width: 3px;
      height: 14px;
      background-color: #e984ca;
      border-radius: 1px;
      margin-right: 6px;
      margin-top: -4px;
    }
  }

  .base-info-option {
    display: flex;
    flex-wrap: wrap;

    .option-item {
      flex: none;
      width: 130px;
      margin-right: 20px;
      &:nth-last-child(1) {
        .el-input {
          width: 130px;
        }
      }
      .el-input {
        // width: 130px;
        border-radius: 4px;
      }
      .el-select {
        width: 130px;
      }
      .option-item-name {
        font-size: 16px;
        color: #3c3978;
        line-height: 40px;
      }

      .select-age {
        &::after {
          display: inline-block;
          content: "天";
          position: absolute;
          top: 30%;
          right: 18%;
          font-size: 14px;
          color: #3c3978;
        }
      }
    }
  }
}
::v-deep .el-input--suffix {
  .el-input__inner {
  height: 30px;
}

.el-input__icon {
  line-height: 30px;
}
}
</style>
